<template>
  <div class="search-container">
    <!-- 头部nav-bar -->
    <van-nav-bar class="top-nav">
      <template #left>
        <i class="iconfont icon-gengduo" @click="showPopup = true"></i>
      </template>
      <template #title>
        <p>礼物</p>
      </template>
      <template #right>
        <i class="iconfont icon-search"></i>
      </template>
    </van-nav-bar>
    <!-- 礼物列表 -->
    <giftlist></giftlist>
    <!-- 频道列表 -->
    <van-popup
      v-model="showPopup"
      position="left"
      :style="{ height: '100%' }"
      closeable
      close-icon-position="top-left"
      close-icon="arrow-left"
    >
      <channels></channels>
    </van-popup>
  </div>
</template>

<script>
import giftlist from './components/giftlist'
import channels from './components/channels'
export default {
  // 定义属性
  data() {
    return {
      showPopup: false
    }
  },
  components: {
    giftlist,
    channels
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {}
}
</script>

<style lang="less">
@import url('~@/styles/nav-bar.less'); //引入navbar样式，此样式控制所有search下的子页面导航样式
.search-container {
 
}
</style>
